import { Component, OnDestroy } from "@angular/core";
import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";
import { NavigationExtras, Router } from "@angular/router";
import { _HttpClient } from "@delon/theme";
import { NzMessageService } from "ng-zorro-antd/message";

@Component({
  selector: "passport-register",
  templateUrl: "./register.component.html",
  styleUrls: ["./register.component.less"]
})
export class UserRegisterComponent implements OnDestroy {
  constructor(fb: FormBuilder, private router: Router, public http: _HttpClient, public msg: NzMessageService) {
    this.form = fb.group({
      email: [null, [Validators.required,Validators.email]],
      password: [null, [Validators.required, Validators.minLength(6), UserRegisterComponent.checkPassword.bind(this)]],
      confirm: [null, [Validators.required, Validators.minLength(6), UserRegisterComponent.passwordEquar]]
    });
  }

  // #region fields

  get username() {
    return this.form.controls.username;
  }

  get password() {
    return this.form.controls.password;
  }

  get confirm() {
    return this.form.controls.confirm;
  }

  form: FormGroup;
  error = "";
  type = 0;
  visible = false;
  status = "pool";
  progress = 0;
  passwordProgressMap = {
    ok: "success",
    pass: "normal",
    pool: "exception"
  };

  // #endregion

  // #region get captcha

  count = 0;
  interval$: any;

  static checkPassword(control: FormControl) {
    if (!control) {
      return null;
    }
    const self: any = this;
    self.visible = !!control.value;
    if (control.value && control.value.length > 9) {
      self.status = "ok";
    } else if (control.value && control.value.length > 5) {
      self.status = "pass";
    } else {
      self.status = "pool";
    }

    if (self.visible) {
      self.progress = control.value.length * 10 > 100 ? 100 : control.value.length * 10;
    }
  }

  static passwordEquar(control: FormControl) {
    if (!control || !control.parent) {
      return null;
    }
    if (control.value !== control.parent.get("password").value) {
      return { equar: true };
    }
    return null;
  }

  // #endregion

  submit() {
    this.error = "";
    Object.keys(this.form.controls).forEach((key) => {
      this.form.controls[key].markAsDirty();
      this.form.controls[key].updateValueAndValidity();
    });
    if (this.form.invalid) {
      return;
    }

    const data = this.form.value;
    this.http.post("api/pms/register?_allow_anonymous=true", data).subscribe((res) => {

      if (res.code === 1) {
        let navigationExtras: NavigationExtras = {
          queryParams: { "email": data.email },
          fragment: "anchor"
        };
        this.router.navigate(["/passport/register-result"], navigationExtras);
      } else {
        this.msg.error(res.message);
      }
    });
  }

  // 发送邮件
  sendEmail() {

    const email = this.form.value.email;

    this.http.post("api/pms/send-email?_allow_anonymous=true", { email: email }).subscribe((res) => {

      if (res.code === 1) {
        this.msg.success("邮件发送成功,请查收!");
      } else {
        this.msg.error(res.message);
      }
    });

  }

  ngOnDestroy(): void {
    if (this.interval$) {
      clearInterval(this.interval$);
    }
  }
}
